<template>
	<view class="coreshop-flex coreshop-flex-direction">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="计划详情" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view>
			<view class="coreshop-flex coreshop-flex-direction-column card">
				<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between">
					<view class="plan-title">
						{{planInfo.gzjh || '--'}}
					</view>
					<u-tag :text="planInfo.planType || '--'" plain shape="circle"></u-tag>
				</view>
				<view class="coreshop-flex plan-auth u-flex">
					<view class="head-box">{{planInfo.addAccName[0]}}</view>
					{{planInfo.addAccName || '--'}}
					<text class="update-time">最新修改时间：{{$common.longDateFormate(planInfo.chgTime) || '--'}}</text>
				</view>
			</view>
			<view v-for="(item,index) in planItemList" :key="index" class="plan-list card" style="min-height: 215px;">
				<view v-if="editCur == index">
					<edit-plan-item :planType="planInfo.JHLX" :planItemData.sync="editItem" :isEdit.sync="editCur"
						@editSure="editSure"
						:hideTextarea="showSelectCorrelation || showSelectClient || showCorrelation"
						:showSelectCorrelation.sync="showSelectCorrelation" :showSelectClient.sync="showSelectClient">
					</edit-plan-item>
				</view>
				<view v-else>
					<view class="coreshop-flex coreshop-justify-between planborder">
						<view class="coreshop-flex-sub coreshop-font-sm">
							计划时间：{{$common.longDateFormate(planInfo.Date)}}~{{$common.longDateFormate(planInfo.EndDate)}}
						</view>
						<u-icon name="edit-pen" color="#2A8FFC" @click="editYearItem(index)"
							v-if="planInfo.YWYID == userData.ID && isPublish && planInfo.JHLX == 4"></u-icon>
					</view>
					<u-line length="100%" margin="12rpx 0 0 0"></u-line>
					<view class="title">{{item.jhxq.JHFL}} </view>
					<view class="msg-detail-list">
						<view class="msg-detail-item" v-for="(planDtaItem, idx) in item.jhxqitem" :key="idx">
							<view class="text-msg">{{planDtaItem.jhxqitem.JHXQ}}</view>
							<view class="icon-card" v-if="!planDtaItem.wcqk.length"
								@click="handleAccomplish(planDtaItem)">
								<u-icon name="plus-circle-fill" style="justify-content: center;" labelSize="14" bold
									size="38" color="#ff8a00"></u-icon>
								<view>完成情况</view>
							</view>
						</view>
					</view>
					<view class="count" v-if="item.Sales">
						<view class="label">计划数量: </view> {{item.Sales}}
					</view>
				</view>
			</view>
			<template v-if="addPlanItem.length">
				<view v-for="(item,index) in addPlanItem" :key="item.key" class="edit-box">
					<edit-item type="add" :userData="userData" :addRowList="planItemList" :planInfo="planInfo"
						:item="item" @delItem="delItem(index)" @publishSure="getDetail">
					</edit-item>
				</view>
			</template>
			<!-- v-if="planInfo.YWYID == userData.ID && (!isFinish || !isPublish)" -->
			<view class="coreshop-flex coreshop-justify-center coreshop-align-center card" style="height: 90rpx;"
				@click="addItem">
				<view slot="body" class="coreshop-flex coreshop-justify-center add-btn">
					<u-icon name="plus" custom-prefix="custom-icon" color="#157EFB" :bold="true" size="15"
						:custom-style="{'margin-right':'14rpx'}"></u-icon>
					添加事项
				</view>
			</view>

			<!-- 完成情况说明 -->
			<explain-box v-if="showExplainPop" @cancelExplain="cancelExplain" @explainSure="explainSure"
				:userData="userData" :editExplainInfo="editExplainInfo"></explain-box>
		</view>
	</view>
</template>

<script>
	import yesterdayPlan from './components/yesterdayPlan.vue'; //昨日未完成计划
	import explainBox from './components/explain.vue'; //完成情况说明
	import editItem from './components/editItem.vue';
	export default {
		data() {
			return {
				planID: '',
				planAuth: '', //2为收到的计划，无分解计划  4为评阅计划
				planInfo: {},
				planItemList: [{}],
				typeList: [],
				addPlanItem: [], // 新增计划
				// 年计划修改
				editCur: null,
				showExplainPop: false,
			}
		},
		onLoad(e) {
			this.planID = e.id;
			this.planAuth = e.planAuth || '';
			this.GetGZJHXQ()
		},
		onShow() {
			this.typeList = this.$db.get('workPlanType');
			this.planInfo.gzjh = '2024年第26周计划'
			this.planInfo.planType = this.typeList.find(item => item.value == 2).label
			this.planInfo.addAccName = '张三'
			this.planInfo.chgTime = '2024-06-29 16:07'
			this.planInfo.Date = '2024-06-24 00:00'
			this.planInfo.EndDate = '2024-06-30 23:59'
		},
		components: {
			yesterdayPlan,
			editItem,
			explainBox
		},
		methods: {
			editYearItem(idx) {
				// this.editItem = this.planItemList[idx];
				// this.editCur = idx; 
			},
			addItem() {
				this.addPlanItem.push({
					key: new Date().getTime()
				});
			},
			delItem(idx) {
				this.addPlanItem.splice(idx, 1);
			},
			GetGZJHXQ() { //获取计划详情
				// uni.showLoading({
				// 	title:'加载中',
				// 	mask:true
				// })
				// this.$minApi.app._GetGZJHXQ({JHID:this.planID}).then(res => {
				// uni.hideLoading();
				// this.planInfo = res.data.gzjh || {};
				// let planitems = res.data.model || [];
				this.planInfo = {
					AddAcc: "15557167200",
					AddAccName: "林海广",
					AddIP: "124.90.106.42",
					AddTime: "2024-05-05T21:47:09.133",
					ChgAcc: "15557167200",
					ChgAccName: "林海广",
					ChgIP: "124.90.106.42",
					ChgTime: "2024-05-05T21:47:15.277",
					Date: "2024-05-01T00:00:00",
					Deleted: "0",
					EndDate: "2024-05-31T23:59:59",
					GZJH: "2024年05月计划",
					GZZJ: null,
					ID: "76B53E9931C04F8E96C07BED3AA9AC40",
					IsFB: "1",
					IsNM: null,
					IsNull: false,
					JHJD: "|76B53E9931C04F8E96C07BED3AA9AC40",
					JHLX: "3",
					JHZT: null,
					SJJHID: "",
					YWYID: "BF19F8A6C4F8421BAFB8121A6F17EF49",
				}
				let planitems = [{
					glkh: [],
					glr: [],
					jhxq: {
						ActualAmount: 0,
						AddAcc: "15557167200",
						AddAccName: "林海广",
						AddIP: "124.90.106.42",
						AddTime: "2024-05-05T21:47:09.15",
						ChgAcc: "15557167200",
						ChgAccName: "林海广",
						ChgIP: "124.90.106.42",
						ChgTime: "2024-05-05T21:47:09.15",
						CompletionTime: "1900-01-01T00:00:00",
						GLKH: "",
						GLKHName: "",
						GLR: "",
						GLRName: "",
						GLRType: "",
						ID: "4A60D8091210454593A5CCEEF625590C",
						IsNull: false,
						IsRead: false,
						IsTuiSong: 0,
						JHFL: "4月份完成情况",
						JHID: "76B53E9931C04F8E96C07BED3AA9AC40",
						JHSLLX: "",
						JHXQ: "1、完成沃服的一期功能的优化，包括经销注册、手机审核等，完成二期功能的梳理，目前已经对供应商的入驻、供应商的产品添加、订单管理功能，代下单功能已完成60%，预计这周完成供应商的基本功能，15号之前完成测试上线。|2、小休修新版小程序界面、流程、功能讨论完毕，师傅端设计界面已经完成，用户端还在测试中，展会中出现的注册的一些问题已经修复。|3、林先森照相馆的迭代版本基本完成，目前在提交客户测试中。|4、进销存小程序完成改版，也更新上去了。|5、郑州、西安、济南城市展会推广，目前加的服务商在30人左右，部分在试用过程中。",
						JHZT: "1",
						OldJHID: "",
						QKSM: null,
						RelationalSchemaID: null,
						RowID: 1,
						SFCF: null,
						SJXQID: "",
						Sales: 0,
						TXZQ: null,
						XCBFSJ: "0001-01-01T00:00:00",
					},
					jhxqitem: [{
						jhxqitem: {
							ActualAmount: 0,
							AddAcc: "15557167200",
							AddAccName: "林海广",
							AddIP: "124.90.106.42",
							AddTime: "2024-05-05T21:47:09.15",
							ChgAcc: "15557167200",
							ChgAccName: "林海广",
							ChgIP: "124.90.106.42",
							ChgTime: "2024-05-05T21:47:09.15",
							CompletionTime: "1900-01-01T00:00:00",
							GLKH: "",
							GLKHName: "",
							GLR: "",
							GLRName: "",
							GLRType: "",
							ID: "2D64CCF339164F159DD6F948F7C5EEFE",
							IsNull: false,
							JHFL: "4月份完成情况",
							JHID: "76B53E9931C04F8E96C07BED3AA9AC40",
							JHXQ: "1、完成沃服的一期功能的优化，包括经销注册、手机审核等，完成二期功能的梳理，目前已经对供应商的入驻、供应商的产品添加、订单管理功能，代下单功能已完成60%，预计这周完成供应商的基本功能，15号之前完成测试上线。",
							JHZT: "1",
							QKSM: null,
							RelationalSchemaID: null,
							RowID: null,
							Seq: 0,
							XCBFSJ: null,
							XQID: "4A60D8091210454593A5CCEEF625590C",
						},
						wcqk: []
					}]
				}]
				if (this.planInfo.IsFB == '0') {
					this.isPublish = false;
					let list = []; //未发布
					planitems.forEach((item, index) => {
						let GLRList = [];
						item.glr.forEach(items => {
							GLRList.push({
								id: items.glr,
								name: items.glrname,
								type: items.glrtype
							})
						})
						let GLKHList = [],
							GLKHList_ME = [],
							GLKHList_SUB = {};
						item.glkh.forEach(items => {
							let info = {
								id: items.glkh,
								name: items.glkhname
							};
							GLKHList.push(info);
							if (items.glssr == this.userData.ID) {
								GLKHList_ME.push(info);
							} else {
								GLKHList_SUB.id = items.glssr;
								GLKHList_SUB.list = [];
								GLKHList_SUB.list.push(info);
							}
						})
						let info = {
							key: item.key || new Date().getTime() + index,
							JHFL: item.jhxq.JHFL,
							JHXQList: item.jhxq.JHXQ.split('|') || [],
							Sales: item.jhxq.Sales || 0,
							JHSLLX: item.jhxq.JHSLLX || '',
							CompletionTime: this.$common.longDateFormate(item.jhxq.CompletionTime),
							glrList: GLRList,
							glkhList: GLKHList,
							glkh_me: GLKHList_ME,
							glkh_sub: GLKHList_SUB
						};
						list.push(info);

					})
					this.planItem = list;
				} else {
					// 当天计划今天的跳转到新的当天计划详情
					if (this.planInfo.JHLX == '1' && this.planInfo.YWYID == this.userData.ID) {
						const d1 = this.$u.timeFormat();
						const d2 = this.$common.longDateFormate(this.planInfo.Date, 'ymd');
						if (d1 == d2) {
							return uni.redirectTo({
								url: '/packagePlan/pages/dayPlanDetail/index'
							})
						}
					}
					this.isPublish = true;
					planitems.forEach(item => {
						if (item.jhxq.JHZT == '1') {
							this.isFinish = false;
						}
					})
					this.planItemList = planitems;
					// 为上级关联计划写的计划
					// if (this.planInfo.SJJHID) {
					// 	this.$refs.correlationHigherPlan.getDetail(this.planInfo.SJJHID);
					// }
				}
				const planType = this.planInfo.JHLX;

				console.log(this.planItemList);
				// if ((planType == 2 || planType == 3 || planType == 4) && this.planInfo.YWYID == this.userData.ID) {
				// 	this.$refs.estimatedPlanList.getMyPlan(this.planID, this.planInfo);
				// }

				// if (planType == 1 || planType == 2 || planType == 3) {
				// 	this.$refs.EstimatedPlan.init(planType, this.planInfo);
				// }
				// }).catch(() => {})
			},
			handleAccomplish() { // 完成情况模态框
				this.showExplainPop = true
			},
			cancelExplain() {
				this.showExplainPop = false
			}
		}
	}
</script>


<style lang="scss" scoped>
	/deep/ .u-icon {
		justify-content: center;
	}

	.plan-title {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.head-box {
		width: 41rpx;
		height: 41rpx;
		background-color: #2A8FFC;
		border-radius: 50%;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		line-height: 38rpx;
		margin-right: 9rpx;
	}

	.plan-auth {
		font-size: 26rpx;
		color: #333333;
		margin-top: 20rpx;

		.update-time {
			color: #A7AAB0;
			margin-left: 17rpx;
		}
	}

	.title {
		height: 60rpx;
		line-height: 60rpx;
	}

	.msg-detail-list {

		.msg-detail-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
			padding: 18rpx 24rpx;
			background-color: #f1f1f5;
			border-radius: 14rpx;
			min-height: 150rpx;

			.text-msg {
				flex: 1;
				font-size: 28rpx;
				color: #6c6c6c;
				margin-right: 4rpx;
			}

			.icon-card {
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #ff8a00;
			}
		}
	}

	.card {
		border: 1px solid #F7F7F7;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 160rpx;
		margin: 20rpx;
		padding: 20rpx;
	}

	.plan-list {
		border-top: 1px solid #eee;
	}

	.plan-item {
		padding: 0 20rpx 10rpx;
	}

	.add-btn {
		font-size: 26rpx;
		color: #157EFB;
		text-align: center;
		line-height: 40rpx;
	}
</style>